<template>
  <div class="cate">
    <div class="container">
      <div class="titl">商品分类
      </div>
      <div class="main">
        <!-- 表格 -->

        <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange"
          style="width: 100%">
          <el-table-column label="序号" type="index" width="60">
          </el-table-column>
          <el-table-column label="序号">
            <template slot-scope="scope">
              <span v-if="!scope.row.isEdit">
                {{ scope.row.cateName }}
              </span>
              <el-input v-else size="mini" v-model="scope.row.cateName"></el-input>
             

            </template>

          </el-table-column>

          <el-table-column label="是否启用">
            <template slot-scope="scope">
              <el-switch 
            :disabled="!scope.row.isEdit"
              v-model="scope.row.state" 
              active-color="#13ce66" 
              inactive-color="#ff4949"></el-switch>

            </template>


          </el-table-column>



          <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            style="margin-right: 5px"
            size="mini"
            @click="handleEdit(scope.row)"
            :type="scope.row.isEdit ? 'success' : 'default'"
          >
            {{ scope.row.isEdit ? '完成' : '编辑' }}
          </el-button>

          <el-button size="mini" @click="handleDel(scope.row)" type="danger">
            删除
          </el-button>
        </template>
      </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[3, 6]" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>

      </div>
    </div>



  </div>
</template>

<script>
import { getCateListReq,editCateReq} from '@/api/goods';

getCateListReq
export default {
  data() {
    return {
       //分类数据
       tableData: [],
      //分页数据
      currentPage: 1,
      pageSize: 5,
      total: 0,
   
    }
  },

  methods: {

    // /获取数据方法
    async getData() {
      let currentPage = this.currentPage
      let pageSize = this.pageSize
      let res = await getCateListReq({
        currentPage,
        pageSize,
      })
      let { total, data } = res.data
      //修改数据
      data.forEach(v => {
        //把state转换为布尔值
        v.state = v.state === 1 ? true : false
        //添加一个字段 是否可编辑
        v.isEdit = false
      })
      //数据赋值
      this.total = total
      this.tableData = data
      //如果获取data为[] 且currentPage>1 退回上一页
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--
        this.getData()
      }
    },
    // 编辑
   async handleEdit(row) {
      //把可编辑状态取反
      row.isEdit=!row.isEdit
      if(!row.isEdit){
        let res=await editCateReq({
          ...row,
          state:row.state?1:0
        })
      }
   
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getData()
    },
  },
  created() {
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
.cate {
  height: 100%;
  width: 100%;
  padding: 10px;
  background-color: #f0f2f5;

  .container {
    // height: 216px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 3px;
    box-shadow: 0px 0px 3px rgb(110, 110, 110);

    .titl {
      padding: 14px;
      border-bottom: 1px solid #eee;
    }

   


  }
}
</style>